<template>
    <div class="main price-list">
        <section>
            <el-form ref="searchForm" class="search-block" :model="listQuery" label-position="left" label-width="82px">
                <input type="text" style="display: none"/>
                <el-row :gutter="50">
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                        <el-form-item label="商品名称：" prop="name">
                            <el-input @keyup.enter.native="search" v-model="listQuery.name" placeholder="商品名称" maxlength="50" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                        <el-form-item label="商品品类" prop="cateId">
                            <el-cascader @change="handleChange" :props="props" placeholder="请选择分类" :show-all-levels="true" clearable></el-cascader>
                        </el-form-item>  
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                      <el-form-item label="商家名称：" prop="merchantId">
                        <el-select :filterable="true" v-model="listQuery.merchantId" :clearable="true">
                            <el-option v-for="item in shopSelect" :key="item.id" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                      <el-form-item label="审核状态：" prop="audit_status">
                        <el-select v-model="listQuery.audit_status" :clearable="true">
                            <el-option v-for="item in auditStatus" :key="item.id" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="" class="btn-item">
                    <el-button type="primary" size="mini" icon="el-icon-search" plain @click="search">搜索</el-button>
                    <span class="btn-reset" @click="resetForm('searchForm')">清空搜索条件</span>
                </el-form-item>
            </el-form>
            <el-table :data="list" v-loading="listLoading" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row>
                <el-table-column align="center" prop="applyMerchant" label="申请商家" min-width="100"></el-table-column>
                <el-table-column align="center" prop="mainPic" label="商品图片" min-width="100">
                    <template slot-scope="scope">
                        <img :src="scope.row.mainPic" width="100px" height="100px" />
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="serialNo" label="商品编码" min-width="100"></el-table-column>
                <el-table-column align="center" prop="goodsName" label="商品名称" min-width="100"></el-table-column>
                <el-table-column align="center" prop="cateName" label="所属品类" min-width="100"></el-table-column>
                <el-table-column align="center" prop="auditStatus" :formatter="auditStatusFormat" label="状态" min-width="100"></el-table-column>
                <el-table-column align="center" prop="auditTime" label="申请时间" min-width="100">
                <template slot-scope="scope">
                    <span>{{formatDate(scope.row.auditTime, 'YYYY-MM-DD HH:mm:ss')}}</span>
                </template>
                </el-table-column>
                <el-table-column align="center" prop="" label="操作" width="220" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="success" size="mini" @click="operate(scope.row.id)" plain>查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="listQuery.page"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="listQuery.page_size"
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listTotal">
            </el-pagination>
        </section>
    </div>
</template>

<script>
  import { backGoodsCategory, getShopSelectList } from '@/api/merchantsys/goods'
  import { getModifyPriceApplyList } from '@/api/merchantsys/price'
    export default {
        name: 'priceList',
        data() {
            return {
                shopSelect:[],
                joinPersons:[],
                auditStatus: [
                    { label: '全部', value: null },
                    { label: '审核中', value: 2 },
                    { label: '审核驳回', value: 3 },
                    { label: '审核通过', value: 4 },
                    { label: '待审核', value: 5 }
                ],
                list: [],
                listQuery: {
                    merchantId:null,
                    cateId:null,
                    name: null,
                    audit_status: '',
                    page: 1,
                    page_size: 10
                },
                pList: [],
                listTotal: 0,
                listLoading: false,
                loading:false,
                props: {
                    expandTrigger: 'click',
                    emitPath: true,
                    lazy: true,
                    lazyLoad: this.lazyLoad
                },
            }
        },
        created() {
            this.fetchShopSelectList()
            this.getList()
        },
        methods: {
            //审核状态格式转换
            auditStatusFormat(row) {
                return ['-', '-', '审核中', '审核驳回', '审核通过', '待审核'][row.auditStatus]
            },
            operate(id) {
                this.$router.push({ path: '/price/detail/' + id })
            },
            modify(processId) {
                this.$router.push({ path: '/goods/base/modify/' + processId })
            },
            //商家下拉列表
            fetchShopSelectList() {
                getShopSelectList().then(res => {
                    if (res.code == 200 && res.data) {
                        res.data.forEach(element => {
                            this.shopSelect.push({ label: element.merchantName, value: element.shopId })
                        })
                    }
                })
            },
            handleChange(value){
                this.listQuery.cateId = value[value.length - 1]
            },
            lazyLoad(node, resolve) {
                this.getData(node, resolve)
            },
            getData(node, resolve) {
                const level = node.level
                backGoodsCategory({ parent_cate_id: node.value }).then(res=>{
                    var result
                    if (level === 0) {
                    result = res.data
                    result.forEach(item => {
                        item.value = item.catId
                        item.label = item.name
                    })
                    }
                    if (level === 1) {
                    result = res.data
                    result.forEach(item => {
                        item.value = item.catId
                        item.label = item.name
                    })
                    }
                    if (level === 2) {
                    result = res.data
                    result.forEach(item => {
                        item.value = item.catId
                        item.label = item.name
                        //这句代码表示当点击最后一级的时候 label后面不会转圈圈 并把相关值赋值到选择器上
                        item.leaf = level >= 2
                    })
                    }
                    resolve(result)
                })
            },
            //请求商家列表数据
            getList() {
                this.listLoading = true;
                let cateId = null
                getModifyPriceApplyList({
                    shopId: this.listQuery.merchantId,
                    cateId: this.listQuery.cateId,
                    goodsName: this.listQuery.name,
                    auditStatus: this.listQuery.audit_status,
                    page: this.listQuery.page,
                    page_size: this.listQuery.page_size
                }).then(res => {
                    this.list = res.data.data;
                    this.listTotal = res.data.total;
                    this.listLoading = false;
                }).catch(err => {
                    this.list = [];
                    this.listTotal = 0;
                    this.listLoading = false;
                })
            },
            // 清空搜索条件
            resetForm (formName) {
                this.$nextTick(() => {
                    this.$refs[formName].resetFields()
                })
            },
            // 搜索
            search() {
                this.listQuery.page = 1;
                this.getList();
            },
            //切换每页条数
            handleSizeChange (value) {
                this.listQuery.page_size = value;
                this.getList()
            },
            // 切换分页
            handleCurrentChange(page) {
                this.listQuery.page = page;
                this.getList();
            },
        }
    }
</script>

<style lang="scss">
  
</style>
